<template>
    <div class="recommendManage">
      <div class="crumbs">
          <el-breadcrumb separator="/">
              <el-breadcrumb-item><i class="el-icon-tickets"></i> 推荐管理</el-breadcrumb-item>
          </el-breadcrumb>
      </div>
      <!-- 列表 -->
      <div class="container">
        <div class="handle-box">
          <div class="searchBox">
            <el-input class="handle-input" v-model.trim="searchText" placeholder="用户昵称或者动态内容" suffix-icon="el-icon-search" @keyup.enter.native="operateSearchRecord"></el-input>
          </div>
        </div>
        <el-table :data="recommendList" style="width: 100%">
          <el-table-column align="center" width="80"></el-table-column>
          <el-table-column label="">
            <template slot-scope="scope">
              <div class="tableScope" v-if="scope.row.voteType === '1'">
                <div class="tableScopeFirst" v-if="scope.row.defaultText">{{scope.row.defaultText}}</div>
                <div class="tableScopeFirst" v-if="scope.row.defaultImages">
                  <div class="tableScopeFirstCell" v-for="(itemCell, indexCell) in JSON.parse(scope.row.defaultImages)" :key="'imageCell'+indexCell">
                    <img :src="itemCell">
                  </div>
                </div>
                <div class="tableScopeFirst" v-if="scope.row.defaultVideos">
                  <div class="tableScopeFirstCell" v-for="(itemCell, indexCell) in JSON.parse(scope.row.defaultVideos)" :key="'videoCell'+indexCell">
                    <video :src="itemCell.url" :poster="itemCell.cover" controls v-if="indexCell === 0"></video>
                  </div>
                </div>
                <div class="tableScopeSecond">
                  <div class="tableScopeSecondCell">{{scope.row.nickName || '小悦老师'}}</div>
                  <div class="tableScopeSecondCell">{{scope.row.createTime}}</div>
                  <div class="tableScopeSecondCell">评论：{{scope.row.forumComment || 0}}</div>
                  <div class="tableScopeSecondCell">点赞：{{scope.row.forumPraise || 0}}</div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="" align="center" width="300">
              <template slot-scope="scope">
                  <el-button type="primary" plain v-if="scope.row.voteType === '1' && scope.row.matterStick === '0'" @click.stop.prevent="operateStickRecord(scope.row.matterId, '1')">置顶</el-button>
                  <el-button type="info" plain v-if="scope.row.voteType === '1' && scope.row.matterStick === '1'" @click.stop.prevent="operateStickRecord(scope.row.matterId, '0')">取置</el-button>

                  <el-button type="success" plain v-if="scope.row.voteType === '1' && scope.row.matterRecommend === '0'" @click.stop.prevent="operateRecommendRecord(scope.row, '1')">推荐</el-button>
                  <el-button type="info" plain v-if="scope.row.voteType === '1' && scope.row.matterRecommend === '1'" @click.stop.prevent="operateRecommendRecord(scope.row, '0')">取荐</el-button>

                  <el-button type="warning" plain v-if="scope.row.voteType === '1' && scope.row.matterAdopt === '0'" @click.stop.prevent="operateAdoptRecord(scope.row, '1')">采纳</el-button>
                  <el-button type="primary" plain v-if="scope.row.voteType === '1' && scope.row.matterAdopt === '1'">已纳</el-button>
                  <!-- <el-button type="info" plain v-if="scope.row.voteType === '1' && scope.row.matterAdopt === '1'" @click.stop.prevent="operateAdoptRecord(scope.row, '0')">取纳</el-button> -->
                  <el-button type="danger" plain @click.stop.prevent="operateDeleteRecord(scope.row.forumId)">删除</el-button>
              </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-sizes="[10, 20, 30]"
            :page-size="10"
            layout="sizes, prev, pager, next, jumper"
            :total="listTotal">
          </el-pagination>
        </div>
      </div>
    </div>
</template>

<script type="text/ecmascript-6">
  import Vue from 'vue'
  import { acquireRecommendFromGather, stickRecordFromGather, adoptRecordFromGather, recommendRecordFromGather, removeRecordFromGather } from '@/config/api'
  export default {
    name: 'recommendManage',
    data () {
      return {
        // 推荐列表
        recommendList: [],
        // 列表总页数
        listTotal: 0,
        // 当前页面
        currentPage: 1,
        // 每页条数
        pageSize: 10,
        // 搜索文本
        searchText: '',
        // 操作类型 1 新增 2 编辑 3 查看
        operateType: '0'
      }
    },
    mounted (){
      const self = this;
      // 初始化 推荐管理界面
      self.initRecommendManageInterface()
    },
    methods: {
      // 初始化 推荐管理界面
      initRecommendManageInterface() {
        const self = this;
        // 获取 集合中的投票记录
        self.obtainRecommendFromGather()
      },
      // 获取 集合中的推荐记录
      async obtainRecommendFromGather() {
        const self = this;
        const voteInfo = await acquireRecommendFromGather(self.currentPage, self.pageSize, self.searchText)
        console.log(voteInfo, '获取 集合中的推荐记录')
        if (voteInfo.status === 200) {
          // 推荐列表
          self.recommendList = voteInfo.data.list
          // 列表总页数
          self.listTotal = voteInfo.data.total
        }
      },
      // 操作·删除推荐记录
      operateDeleteRecord(forumId) {
        const self = this;
        self.$confirm('删除后不可恢复，请谨慎删除贴子', '确定删除', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(async() => {
          const removeRecommendState = await removeRecordFromGather(forumId)
          console.log(removeRecommendState, '...removeRecommendState')
          if (removeRecommendState.status === 200) {
            // 获取 集合中的推荐记录
            self.obtainRecommendFromGather()
          } else {
            self.$message({
              type: 'info',
              message: '删除失败'
            });
          }
        }).catch(() => {});
      },
      // 操作·置顶推荐记录
      async operateStickRecord(matterId, matterStick) {
        const self = this;
        const stickRecommendState = await stickRecordFromGather(matterId, matterStick)
        if (stickRecommendState.status === 200) {
            // 当前页面
            self.currentPage = 1
            // 获取 集合中的推荐记录
            self.obtainRecommendFromGather()
          } else {
            self.$message({
              type: 'info',
              message: '置顶失败'
            });
          }
      },
      // 操作·采纳推荐记录
      operateAdoptRecord(item, matterAdopt) {
        const self = this;
        self.$confirm('采纳后不可更改，请谨慎采纳贴子', '确定采纳', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(async() => {
          const adoptRecommendState = await adoptRecordFromGather(item.matterId, matterAdopt)
          if (adoptRecommendState.status === 200) {
            // // 当前页面
            // self.currentPage = 1
            // // 获取 集合中的推荐记录
            // self.obtainRecommendFromGather()
            Vue.set(item, 'matterAdopt', matterAdopt)
          } else {
            self.$message({
              type: 'info',
              message: '采纳失败'
            });
          }
        }).catch(() => {});
      },
      // 操作·推荐推荐记录
      async operateRecommendRecord(item, matterRecommend) {
        const self = this;
        const recommendRecommendState = await recommendRecordFromGather(item.matterId, matterRecommend)
        if (recommendRecommendState.status === 200) {
          // // 当前页面
          // self.currentPage = 1
          // // 获取 集合中的推荐记录
          // self.obtainRecommendFromGather()
          Vue.set(item, 'matterRecommend', matterRecommend)
        } else {
          self.$message({
            type: 'info',
            message: '采纳失败'
          });
        }
      },
      // 操作·搜索推荐记录
      async operateSearchRecord() {
        const self = this;
        // 获取 集合中的推荐记录
        self.obtainRecommendFromGather()
      },
      handleSizeChange(val) {
        const self = this;
        // 每页条数
        self.pageSize = val
        // 获取 集合中的推荐记录
        self.obtainRecommendFromGather()
      },
      handleCurrentChange(val) {
        const self = this;
        // 当前页面
        self.currentPage = val
        // 获取 集合中的推荐记录
        self.obtainRecommendFromGather()
      }
    },
  }
</script>
<style lang="less">

</style>
<style lang="less" scoped>
  @import 'recommendManage.less';
</style>
